<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>shipinjiankong</title>
    <h1>房屋环境实时监控</h1>
</head>





<style>
    /* 全局样式重置，确保不同浏览器的默认样式一致性 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* 整体页面布局与背景设置 */
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-image: url('t0163975e6092dd2eda.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background: linear-gradient(to bottom, rgba(240, 240, 240, 0.9), rgba(240, 240, 240, 1));
    }

    body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('jiankong.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        filter: blur(5px);
        z-index: -1;
    }

    /* 页面头部导航栏样式 */
    nav {
        width: 100%;
        background-color: #d4c81b;
        box-shadow: 0 2px 5px rgba(203, 72, 72, 0.3);
        padding: 10px 0;
        text-align: center;
        display: flex;
        justify-content: center;
        border-bottom: 2px solid #555;
    }

    nav a {
        text-decoration: none;
        color: #ccc;
        font-weight: bold;
        margin: 0 20px;
        transition: color 0.3s ease;
        display: flex;
        align-items: center;
        background: linear-gradient(to bottom, #333, #333);
        padding: 5px 10px;
        border-radius: 3px;
    }

    nav a img {
        margin-right: 5px;
    }

    nav a:hover {
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
        background: linear-gradient(to bottom, #555, #111);
        transition: all 0.3s ease;
    }

    /* 对输入框和按钮所在的区域（表单及相关容器）设置样式 */
  .main-content {
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        padding: 40px;
        width: 80%;
        max-width: 800px;
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

  .main-content:hover {
        transform: scale(1.02);
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    }

    /* 标题样式，使其更加突出 */
    h1 {
        color: #333;
        text-align: center;
        font-size: 36px;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* 每个输入框和对应的标签设置样式 */
    label {
        display: block;
        margin-bottom: 8px;
        color: #333;
        font-weight: bold;
        font-size: 18px;
    }

    input[type="text"],
    textarea {
        width: 100%;
        padding: 15px;
        border: 1px solid #ccc;
        border-radius: 5px;
        transition: border-color 0.3s ease;
        margin-bottom: 20px;
        background-color: #f9f9f9;
        font-size: 16px;
        position: relative;
    }

    input[type="text"]::before,
    textarea::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #ccc;
        opacity: 0.5;
    }

    input[type="text"]:focus,
    textarea:focus {
        border-color: #007BFF;
        box-shadow: 0 0 5px #007BFF;
        color: #333;
        border-bottom-color: #007BFF;
    }

    input[type="text"]:focus::before,
    textarea:focus::before {
        height: 2px;
        background-color: #007BFF;
        opacity: 1;
    }

    input[type="text"]::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
        color: #ccc;
    }

    input[type="text"]::-moz-placeholder,
    textarea::-moz-placeholder {
        color: #ccc;
    }

    input[type="text"]:-ms-input-placeholder,
    textarea:-ms-input-placeholder {
        color: #ccc;
    }

    input[type="text"]::placeholder,
    textarea::placeholder {
        color: #ccc;
    }

    /* 按钮样式设置 */
    input[type="button"] {
        background-color: #333;
        color: #fff;
        padding: 15px 30px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        font-size: 16px;
        margin-top: 20px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        background-image: linear-gradient(to bottom, #333, #111);
        position: relative;
    }

    input[type="button"]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        border: 2px solid #fff;
        border-top-color: transparent;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        animation: loading 1s linear infinite;
    }

    input[type="button"]:active::after {
        opacity: 1;
    }

    @keyframes loading {
        from {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }

   
</style>


<body>
    <nav>
        <a href="index.html">主页</a>
        <a href="stm32.html">stm32示例页面</a>
        <a href="modbus.html">modbus示例页面</a>
        <a href="shipin.html">视频监控页面</a>
    </nav>
    <img src="http://192.168.112.137:8080/?action=stream" alt="加载视频失败">
</body>
</html>